<template>
  <svg t="1745994573571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1670" :width="`${state.option.width}`" :height="`${state.option.height}`">
    <path d="M512 912c-220.92 0-400-179.09-400-400 0-179.1 117.73-330.66 280-381.63v85.11C274.77 262.97 192 377.74 192 512c0 176.73 143.27 320 320 320s320-143.27 320-320c0-134.26-82.77-249.03-200-296.52v-85.11C794.27 181.34 912 332.9 912 512c0 220.92-179.08 400-400 400z m-40-800h80v400h-80V112z" p-id="1671" :fill="`${cmap.iconColor[0]}`">
    </path>
  </svg>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, watch} from "vue";
import {copyDefinedProperties} from "../../../utils/copy.ts";
import {getColorFromLocal} from "../../../package/style/css.ts";
let cmap=getColorFromLocal()
const props = defineProps(['option']);
const state=reactive({
  option:{
    height:10,
    width:20,
    left:10,
    top:10,
  },
  window:{
    height:1700,
    width:800,
  },
})
onMounted(()=>{
  setting()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
  }
  getWH()
}
watch(()=>props.option,(newValue,oldValue)=>{
  setting()
},{immediate:true,deep:true})
window.addEventListener('resize',()=>{
  getWH()
})
function getWH(){
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  state.option.height=(props.option.height/100)*state.window.height
  state.option.width=(props.option.width/100)*state.window.width
}

const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
</script>

<style scoped>
.icon{
  position: absolute;
  left: v-bind(left);
  top:v-bind(top);
}
</style>
